<template>
  <!-- 整体容器 -->
  <div class="loginContainer">
    <!-- 顶部 -->
    <div class="loginTop">
      <span @click="back"><i class="ri-close-line"></i></span>
      <span class="help">帮助</span>
    </div>
    <!-- 主体登录 -->
    <div class="contextContainer">
      <div class="title">密码登录</div>
      <!-- 输入框 -->
      <div class="inputContainer">
        <input type="text" class="phone" v-model="phone" placeholder="手机号" />
        <input
          type="text"
          class="password"
          v-model="password"
          placeholder="密码"
        />
      </div>
      <!--底部 -->
      <div class="bottom">
        <input type="checkbox" class="radio" v-model="checked" />
        <span class="agree"
          >我已阅读并同意 <i>《知乎协议》《个人信息保护指引》</i>
        </span>
        <button class="login" @click="toPerson">登录</button>
        <div class="attch">
          <span>短信验证码登录</span>
          <span>海外手机号登录</span>
        </div>
      </div>
      <!-- 登录方式 -->
      <div class="loginMethod">
        <div class="text">其他登录方式</div>
        <!-- 小图标 -->
        <div class="tipImg">
          <i class="ri-wechat-fill"></i>
          <i class="ri-qq-line"></i>
          <i class="ri-weibo-fill"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入请求
import {getUserInfo,getErrorMsg} from '@/api'
export default {
  name: "toLogin",
  data() {
    return {
      phone: "19997619851",
      password: "555555",
      checked: false,
    };
  },
  methods: {
    // 去登录成功页面
    async toPerson() {
      //表单验证
      // 手机号存在/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])/d{8}$/
      // 密码长度大于6位
      let { phone, password, checked } = this;
      //  判断手机号
       if(!phone){
          this.$message({
          showClose: true,
          message: '手机号不能为空!',
          type: 'error'
        });
         return
       }
        // 判断手机号格式
       if(!/^1[3-9][0-9]{9}$/.test(phone)){
          this.$message({
          showClose: true,
          message: '请核对手机号!',
          type: 'error'
        });
         return
       }
      // 判断密码
      if(!password){
         this.$message({
          showClose: true,
          message: '密码不能为空!',
          type: 'error'
        });
        return
      }
      if(password.length!==6){
        this.$message({
          showClose: true,
          message: '密码错误!',
          type: 'error'
        });
        return
      }
      if(!checked){
        this.$message({
          showClose: true,
          message: '请阅读协议,并同意后进行登录!',
          type: 'error'
        });
        return
      }

      if(phone==19997619851&&password==555555){
          
         // 发送请求
      let result =await getUserInfo()
      // 失败干啥
      if(result.code !== 200){
        this.$message({
          showClose: true,
          message: '登录失败!',
          type: 'error'
        });
        return
      }
      if(result.data.data.phone==phone&&result.data.data.password==password){
        let user=JSON.stringify(result.data.data.userInfo)
        this.$router.push({
          path: "/login?user" + user,
        });
        localStorage.setItem("user", user);
      }
      }else{
         let result =await getErrorMsg()
         console.log(result);
      }

      // 数据库的漏洞
      // let isUser=result.data.some(item=>{
      //   // console.log(item.data.phone);
      //  return item.data.phone==phone

      // })
      // console.log(isUser);
      // console.log(phone);
      // let isUserPassword=result.data.some(item=>{
      //  return item.data.password===password
      // })
      // console.log(isUserPassword,isUser);
      // 成功干啥
      // if(isUser&&isUserPassword){
      //   // let userInfo={
      //   //   name:result.data.find(item=>{
      //   //     if(item.data.phone===phone){
      //   //       return item.data.nickName
      //   //     }
      //   //   }),
      //   //   img:result.data.find(item=>{
      //   //     if(item.data.phone===phone){
      //   //       return item.data.imgUrl
      //   //     }
      //   //   })
      //   // }

      //   this.$router.push({
      //   path:'/login?user='+JSON.stringify(userInfo),

      // })
      // }
    },
    // 点击×返回登录页面
    back() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang='less' scoped>
// 整体容器
.loginContainer {
  max-width: 375px;
  height: 100%;
  // 顶部
  .loginTop {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    .ri-close-line {
      font-size: 20px;
      padding: 10px;
      color: #424242;
    }
    .help {
      font-size: 12px;
      padding: 5px;
    }
  }
  // 主体内容
  .contextContainer {
    width: 344px;
    height: 374px;
    right: 0;
    left: 0;
    margin: 30px auto;
    // background: teal;
    .title {
      font-size: 22px;
    }
    .inputContainer {
      width: 345px;
      height: 140px;
      margin-top: 30px;
      input {
        width: 320px;
        height: 40px;
        margin: 20px 0 0 10px;
        border: none;
        border-bottom: 1px solid #837575;
      }
    }
    // 同意协议
    .bottom {
      width: 350px;
      height: 126px;
      // background: tomato;
      margin-top: 30px;
      .radio {
        margin-left: 30px;
      }
      .agree {
        font-size: 12px;
        color: #b0b0b0;
        i {
          color: #0366fa;
          font-weight: bold;
        }
      }
      .login {
        width: 324px;
        height: 40px;
        border: none;
        color: #fff;
        background: #1989fa;
        border-radius: 5px;
        margin: 20px 0 0 10px;
      }
      .attch {
        width: 330px;
        height: 20px;
        display: flex;
        margin-top: 16px;
        margin-left: 10px;
        justify-content: space-between;
        font-size: 12px;
        font-weight: bold;
        color: #818181;
      }
    }
    // 登录方式
    .loginMethod {
      position: relative;
      width: 350px;
      height: 120px;
      // background: tomato;
      margin-top: 100px;
      // 文字
      .text {
        left: 0;
        right: 0;
        margin: 40px auto;
        width: 80px;
        height: 20px;
        // background: turquoise;
        font-size: 12px;
        color: #b5b5b5;
        position: absolute;
        top: -10px;
      }
      // 图标
      .tipImg {
        margin-top: 20px;
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        // background: chartreuse;
        font-size: 26px;
        color: #fff;
        position: absolute;
        top: 30px;
        i {
          margin: 5px;
        }
        .ri-weibo-fill {
          width: 30px;
          height: 30px;
          background: #ff6d4b;
          border-radius: 50%;
        }
        .ri-wechat-fill {
          width: 30px;
          height: 30px;
          background: #89d358;
          border-radius: 50%;
        }
        .ri-qq-line {
          width: 30px;
          height: 30px;
          background: #4ec7ff;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
